<template>
	  <view>
		<!--  #ifdef APP-PLUS  -->
		<view class="header">
		  <view class="top-wrapper flex">
			<view class="arrow_left" @click="back">
			  <image src="/static/images/icon-arrow_left.png" mode=""></image>
			</view> 
			<view  @click="spreadMoneyList">提现记录</view>
		  </view>
		</view>
		 <!-- #endif -->
		 
		 
  <view class="appBox">
	  	<!--  #ifdef H5  -->
	  <view class='labelNav'>
	  	<view class='nav '  @click="spreadMoneyList">
	  		提现记录
	  	</view>
	  	</view>
	    <!-- #endif -->
	  
	  
    <view class="j-bg">
      <view class="j-item">
        <text class="txt">可提现（元）</text>
        <text class="num">{{ userInfo.money }}</text>
		<text class="txt"  @click="commissionRecord">佣金记录</text>
      </view>
     <!-- <view class="j-item">
        <text class="txt">消费金</text>
        <text class="num">{{ userInfo.entityMoney }}</text>
      </view> -->
    </view>
    <view class="footer">
      <view class="list-input">
        <form>
          <view class="item">
            <view class="acea-row row-middle">
              <input
                type="number"
                class="texts"
                placeholder="输入提现金额"
                v-model="model.money"
                required
              />
            </view>
          </view>
          <view class="item">
            <view class="acea-row row-middle">
              <input
                type="password"
                class="texts"
                placeholder="输入交易密码"
                v-model="model.payPass"
                :maxlength="6"
                required
              />
            </view>
          </view>
        </form>
      </view>
      <view class="remark">
        <text>温馨提示：</text>
        <text>提现需要收取7%个税费</text>
      </view>
    </view>
    <!-- 银行卡  -->
    <view
      @click="addBlack"
      v-if="Object.keys(blackObj).length"
      class="banks marY30"
    >
      <view class="banks mb20">
        <view class="left">
          <view class="icon">
            <view class="img-logos"></view>
            <image
              class="blank-logo"
              src="/static/images/me_bank_icon4.png"
              mode=""
            >
            </image>
          </view>
          <view class="title"> {{ blackObj.bankName }} </view>
          <view class="title" style="margin-top: 25px;"> {{ blackObj.bankAddress }} </view> 
          <view class="num">{{ idCard(blackObj.bankCode) }}</view>
        </view>
        <image
          class="image"
          src="/static/images/all_bank_bg.png"
          mode=""
        ></image>
      </view>
    </view>
    <!-- 无银行卡 -->
    <view v-else class="banksnone marY30" @click="addBlack">
      <image class="noneimg" src="/static/images/noblack.png" mode=""> </image>
      <view>添加银行卡</view>
    </view>

    <button class="btn" @click="rollOut">立即提现</button>
  </view>
   </view>
</template>

<script>
import store from "@/store/index.js";
import { bgColorArr } from "@/constant/index.js";
import { getRecordApi, extractCash,getUserInfo } from "@/api/user";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      model: {},
      num: 0,
      blackObj: {},
	  userInfo:{}
    };
  },
  onLoad(options) {
    const _info = options.info;
    const inp = options.input;
    if (_info && Object.keys(_info).length) {
      this.blackObj = JSON.parse(_info);
    }
    if (inp && Object.keys(inp).length) {
      const _iObj = JSON.parse(inp);
      this.model = _iObj;
    }
  },
  computed: mapGetters(["userInfo", "isLogin"]),
  onShow() {
  	this.getUser();
  },
  methods: {
	  getUser: function() { 
	  	let that = this; 
	  	getUserInfo().then(res => {
			that.userInfo = res.data 
	  	});
	  }, 
	  back(){
		  console.log(324324)
		 uni.switchTab({
		 	url:"/pages/user/index"
		 })
	  },
	  spreadMoneyList(){
		  uni.navigateTo({
		  	url:"/pages/users/user_spread_money/index?type=1&extractCount=0"
		  })
	  },
	  commissionRecord(){
		  uni.navigateTo({
		  	url:"/pages/users/user_cash/commission"
		  })
	  },
    addBlack() {
      const _json = JSON.stringify(this.model);
      uni.navigateTo({
        url: `/pages/blankList/blankList?input=${_json}`,
      });
    },
    idCard(idNum = "") {
      if (!idNum) return;
      const lastFour = idNum.slice(-4);
      const newArr = new Array(idNum.length - 3).join("*") + lastFour;
      const _reg = newArr.replace(/\s/g, "").replace(/(.{4})/g, "$1 ");
      return _reg;
    },
    randomColor() {
      const _num = Math.floor(Math.random() * (bgColorArr.length - 1 + 1) + 1);
      this.num = _num;
      return bgColorArr[_num - 1];
    },
    rollOut() {
		if(this.userInfo.realName == ""){
			return this.$util.Tips({
			  title: "请先实名后再申请提现",
			});
			setTimeout(function(){
				uni.navigateTo({
					url:"/pages/settings/realNameAuth/index"
				})
			},2000)
		}
		 
      if (!this.model.money)
        return this.$util.Tips({
          title: "请输入提现金额",
        });
      if (!this.model.payPass)
        return this.$util.Tips({
          title: "请输入交易密码",
        });
      if (!Object.keys(this.blackObj).length)
        return this.$util.Tips({
          title: "请选择银行卡",
        });
      console.log(this.model, this.blackObj, "---------------");
      const params = Object.assign(this.model, this.blackObj);
      extractCash(params)
        .then((res) => {
          uni.showToast({
            title: res.message,
            icon: "success",
          });
		  this.getUser();
          store.dispatch("USERINFO");
          this.model = {};
          this.blackObj = {};
        })
        .catch((res) => {
          this.$util.Tips({
            title: res,
          });
          uni.hideLoading();
        });
    },
  },
};
</script>
<style>
	
>>> radio .uni-radio-input {
  width: 24rpx !important;
  height: 24rpx !important;
}

>>> uni-radio .uni-radio-input.uni-radio-input-checked:before {
  content: "";
}

>>> uni-radio .uni-radio-input.uni-radio-input-checked {
  border: 1px solid $theme-color !important;
  background-color: $theme-color !important;
}
</style>
<style lang="scss" scoped>
@import url("../../../static/css/gstyle.scss");

.appBox {
  padding: 16rpx 33rpx;

  .j-bg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 285rpx;
    width: 100%;
    background: url("/static/images/tx_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 39rpx 43rpx 31rpx 43rpx;

    .j-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .txt {
      font-size: 22rpx;
    }

    .num {
      font-size: 66rpx;
    }
  }

  .footer {
    .menus {
      display: flex;
      margin-top: 57rpx;

      .menu-item {
        font-size: 30rpx;
        text-align: center;
        height: 89rpx;
        line-height: 89rpx;
        width: 342rpx;
        background: white;
      }

      .menu-item-active {
        background: $theme-color;
        color: white;
      }
    }

    .list-input {
      .item {
        border-bottom: 1px solid #f0f0f0;
        background: #fff;

        .row-middle {
          position: relative;
          padding: 0 25rpx;
          margin-top: 20rpx;

          .texts {
            flex: 1;
            font-size: 28rpx;
            height: 89rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          input {
            flex: 1;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }

  .banks {
    width: 100%;
    position: relative;
    display: flex;
    height: 240rpx;
    border-radius: $uni-border-radius-xl;
    padding: 0 30rpx;
    background: #30669d;

    .left {
      color: white;

      .num {
        position: absolute;
        top: 60%;
        left: 80rpx;
        font-size: 36rpx;
        font-weight: bold;
      }

      .title {
        position: absolute;
        top: 40rpx;
        left: 110rpx;
      }

      .icon {
        .img-logos {
          position: absolute;
          top: 30rpx;
          background: white;
          opacity: 0.7;
          border-radius: 50%;
          height: 70rpx;
          width: 70rpx;
        }

        .blank-logo {
          position: absolute;
          top: 37rpx;
          left: 37rpx;
          height: 56rpx;
          width: 56rpx;
        }
      }
    }

    .image {
      position: absolute;
      right: 0;
      height: 100%;
      width: 50%;
      opacity: 0.15;
    }
  }

  .banksnone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    justify-content: center;
    height: 240rpx;
    border: 1px solid #ddd;
    font-size: 24rpx;
    border-radius: $uni-border-radius-xl;

    .noneimg {
      width: 130rpx;
      height: 130rpx;
    }
  }

  .remark {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #93b3e2;
    margin-top: 60rpx;
  }
}

 


  .header {
    width: 100%;
    height: 130rpx;
    padding: 28rpx 30rpx;
    z-index: 2;
    padding-top: 71rpx;
	background: #5189EA;
	color: #fff;
    .top-wrapper {
      align-items: center;
	  display: flex;
	  justify-content: space-between;
  
      image {
       width: 38rpx;
       height: 32rpx;
      }  
	  .arrow_left{z-index: 999;}
    }  
}



.labelNav {
		
		display: flex;
		justify-content: flex-end;
		padding: 0 10px;
		height: 44px;
		line-height: 44px;
		font-size: 13px;
		color: #fff;
		position: fixed;
		right: 7px;
		box-sizing: border-box;
		z-index: 5;
		top: 1px;
		z-index: 99999; 
	}




page {
  background-color: #fff !important;
}



</style>
